<template>
  <PageWrapper>
    <template #headerContent>
      <h1 style="font-size: 20px; line-height: 40px">右键菜单示例</h1>
    </template>

    <el-alert
      title="感谢 v-contextmenu，github地址：https://github.com/heynext/v-contextmenu"
      type="success"
      :closable="false"
    >
    </el-alert>

    <el-row :gutter="24" style="margin-top: 20px">
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
        <!-- 基本使用 -->
        <basic />
      </el-col>
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
        <!-- 按钮组 -->
        <menuGroup />
      </el-col>
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
        <!-- 动态菜单 -->
        <menuDynamic />
      </el-col>
    </el-row>
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import RippleDirective from '@/directives/ripple'
import { PageWrapper } from '@/components/Page'
import basic from './basic.vue'
import menuGroup from './menuGroup.vue'
import menuDynamic from './menuDynamic.vue'

export default defineComponent({
  components: { PageWrapper, basic, menuGroup, menuDynamic },
  directives: {
    Ripple: RippleDirective
  }
})
</script>

<style lang="scss" scoped></style>
